<template>
    <transition name="fade-right">
      <div class="rank-detail" v-if="show">
        <nav-bar
          :title="topList.topTitle"
          left-arrow
          left-text="返回"
          @click-left="onClickLeft"
          @click-right="onClickRight"
        >
          <i class="iconfont" slot="right">&#xeb30;</i>
        </nav-bar>
      </div>
    </transition>
</template>

<script>
import NavBar from 'baseUI/NavBar'
import { getMusicList } from 'api/rank'
import { ERR_OK } from 'api/config'
import { mapGetters, mapMutations } from 'vuex'
import { createSong, isValidMusic, processSongsUrl } from '@/model/song'

export default {
  name: 'Rank-detail',
  components: {
    NavBar
  },
  computed: {
    ...mapGetters([
      'topList',
      'playList'
    ])
  },
  data () {
    return {
      show: true,
      songs: []
    }
  },
  created () {
    this._getMusicList()
  },
  methods: {
    onClickLeft () {
      history.back()
    },
    onClickRight () {
      console.log(111)
    },
    _getMusicList () {
      getMusicList(this.$route.params.id).then((res) => {
        if (res.code === ERR_OK) {
          processSongsUrl(this._normalizeSongs(res.songlist)).then((songs) => {
            this.songs = songs
            this.setPlayList(songs)
          })
        }
      })
    },
    _normalizeSongs (list) {
      let ret = []
      list.forEach((item) => {
        const musicData = item.data
        if (isValidMusic(musicData)) {
          ret.push(createSong(musicData))
        }
      })
      return ret
    },
    ...mapMutations({
      setPlayList: 'SET_PLAY_LIST'
    })
  }
}
</script>

<style lang="less">
.rank-detail {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 100;
  background-color: #fff;
}
</style>
